<template>
  <div class="food-explorer">
    <!-- 沉浸式头部（视差效果） -->
    <section class="hero-section" @scroll="handleParallax">
      <div class="hero-background" :style="{ transform: `translateY(${parallaxY}px)` }">
        <div class="background-overlay"></div>
        <div class="floating-elements">
          <div class="floating-icon" style="--delay: 0s">
            <i class="fas fa-utensils"></i>
          </div>
          <div class="floating-icon" style="--delay: 1s">
            <i class="fas fa-pizza-slice"></i>
          </div>
          <div class="floating-icon" style="--delay: 2s">
            <i class="fas fa-ice-cream"></i>
          </div>
        </div>
      </div>
      
      <div class="hero-content">
        <div class="container">
          <div class="row align-items-center min-vh-80">
            <div class="col-lg-6">
              <h1 class="hero-title fade-in-up">
                <span class="title-gradient">探索世界美食</span>
                <span class="title-emoji">🍜</span>
              </h1>
              <p class="hero-subtitle fade-in-up" style="animation-delay: 0.2s">
                发现全球美食文化，体验舌尖上的旅行。从街头小吃到米其林餐厅，开启您的味蕾冒险之旅。
              </p>
              
              <!-- 智能搜索（玻璃态设计） -->
              <div class="smart-search-container fade-in-up" style="animation-delay: 0.4s">
                <div class="search-input-wrapper" @click="showSuggestions = true">
                  <i class="search-icon fas fa-search"></i>
                  <input 
                    v-model="searchQuery"
                    @input="handleSearchInput"
                    class="smart-search-input"
                    placeholder="搜索美食、餐厅或菜系..."
                    type="text"
                  >
                  <button class="search-btn">
                    <i class="fas fa-arrow-right"></i>
                  </button>
                </div>
                
                <!-- 搜索建议 -->
                <div 
                  v-if="showSuggestions && searchQuery.length > 1" 
                  class="suggestions-dropdown"
                  @mouseleave="hideSuggestions"
                >
                  <div 
                    v-for="suggestion in searchSuggestions" 
                    :key="suggestion.id"
                    class="suggestion-item"
                    @click="selectSuggestion(suggestion)"
                  >
                    <i class="fas fa-utensils me-2"></i>{{ suggestion.name }}
                  </div>
                </div>
                
                <!-- 热门标签（横向滚动） -->
                <div class="popular-tags">
                  <span class="tags-label">热门: </span>
                  <div class="tags-scroll-container">
                    <div 
                      class="tag" 
                      v-for="tag in popularTags" 
                      :key="tag"
                      @click="searchQuery = tag"
                    >
                      {{ tag }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 浮动卡片视觉元素 -->
            <div class="col-lg-6 hero-visual d-none d-lg-block">
              <div class="floating-card card-1">
                <img src="https://picsum.photos/seed/food1/300/200" alt="美食图片">
              </div>
              <div class="floating-card card-2">
                <img src="https://picsum.photos/seed/food2/300/200" alt="美食图片">
              </div>
              <div class="floating-card card-3">
                <img src="https://picsum.photos/seed/food3/300/200" alt="美食图片">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 智能导航栏（粘性定位） -->
    <section class="smart-nav-section">
      <div class="container">
        <div class="smart-nav">
          <div class="nav-categories">
            <button 
              v-for="category in categories" 
              :key="category.id"
              class="nav-category-btn"
              :class="{ active: activeCategory === category.id }"
              @click="activeCategory = category.id"
            >
              <i :class="category.icon"></i>
              <span>{{ category.name }}</span>
              <span class="item-count">{{ category.count }}</span>
            </button>
          </div>
          
          <!-- 高级筛选按钮 -->
          <div class="advanced-filters">
            <button 
              class="filter-toggle"
              @click="showFilterPanel = !showFilterPanel"
            >
              <i class="fas fa-sliders-h"></i>
              <span>筛选</span>
            </button>
            
            <!-- 筛选面板（抽屉式） -->
            <div class="filter-drawer" :class="{ 'open': showFilterPanel }">
              <div class="drawer-content">
                <div class="filter-header">
                  <h5>高级筛选</h5>
                  <button class="close-btn" @click="showFilterPanel = false">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                
                <div class="filter-body">
                  <div class="filter-group">
                    <h6>价格范围</h6>
                    <input 
                      v-model="filters.priceRange" 
                      type="range" 
                      min="100" 
                      max="1000" 
                      step="50"
                      class="form-range"
                    >
                    <div class="range-value">
                      <span>最高 ¥{{ filters.priceRange }}</span>
                    </div>
                  </div>
                  
                  <div class="filter-group">
                    <h6>最低评分</h6>
                    <div class="star-rating">
                      <button 
                        v-for="star in 5" 
                        :key="star"
                        class="star-btn"
                        :class="{ active: star <= filters.minRating }"
                        @click="filters.minRating = star"
                      >
                        <i class="fas fa-star"></i>
                      </button>
                      <span>{{ filters.minRating }}+ 星</span>
                    </div>
                  </div>
                  
                  <div class="filter-group">
                    <h6>距离</h6>
                    <select v-model="filters.distance" class="form-select">
                      <option value="any">任何距离</option>
                      <option value="1km">1公里内</option>
                      <option value="5km">5公里内</option>
                      <option value="10km">10公里内</option>
                    </select>
                  </div>
                </div>
                
                <div class="filter-actions">
                  <button class="btn btn-secondary" @click="resetFilters">
                    重置
                  </button>
                  <button class="btn btn-primary" @click="applyFilters">
                    应用筛选
                  </button>
                </div>
              </div>
              <div class="drawer-overlay" @click="showFilterPanel = false"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 主要内容区 -->
    <section class="main-content">
      <div class="container">
        <!-- 特色推荐 -->
        <div class="section-header">
          <h2>特色美食推荐</h2>
          <p>根据您的偏好精心挑选</p>
        </div>
        
        <!-- 美食卡片网格（动态列布局） -->
        <div class="food-grid">
          <div 
            class="food-card" 
            v-for="food in filteredFoods" 
            :key="food.id"
            v-scroll-animate
          >
            <div class="card-image">
              <img :src="food.image" :alt="food.name">
              <div class="card-overlay">
                <button 
                  class="wishlist-btn" 
                  @click="toggleWishlist(food.id)"
                  aria-label="收藏"
                >
                  <i class="fas fa-heart" :class="{ active: food.isWishlisted }"></i>
                </button>
                <div class="rating-badge">
                  <i class="fas fa-star"></i>
                  {{ food.rating }}
                </div>
                <div v-if="food.isNew" class="card-badge">新品</div>
                <div v-if="food.discount" class="card-badge discount">
                  {{ food.discount }}折
                </div>
              </div>
            </div>
            
            <div class="card-content">
              <h3>{{ food.name }}</h3>
              <p class="description">{{ food.description }}</p>
              
              <div class="meta-info">
                <span class="cuisine">{{ food.cuisine }}</span>
                <span class="price">{{ food.price }}</span>
              </div>
              
              <div class="card-actions">
                <button class="btn-primary" @click="viewDetail(food.id)">
                  查看详情
                </button>
                <button class="btn-secondary" @click="shareFood(food)">
                  <i class="fas fa-share-alt"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="load-more-container text-center mt-5 mb-10">
          <button 
            class="btn btn-outline-primary" 
            @click="loadMoreFoods"
            :disabled="loadingMore"
          >
            <i v-if="loadingMore" class="fas fa-spinner fa-spin me-2"></i>
            {{ loadingMore ? '加载中...' : '加载更多美食' }}
          </button>
        </div>
        
        <!-- 美食地图区域 -->
        <div class="food-map">
          <div class="section-header">
            <h2>美食地图</h2>
            <p>探索周边的美食地点</p>
          </div>
          
          <div class="map-container">
            <div class="map-placeholder" v-if="!mapLoaded">
              <i class="fas fa-map-marked-alt"></i>
              <p>地图加载中...</p>
              <button class="btn btn-primary mt-3" @click="loadMap">
                加载地图
              </button>
            </div>
            <div class="map-placeholder" v-else>
              <img src="https://picsum.photos/seed/map/800/400" alt="美食地图" class="w-100 h-100 object-cover">
            </div>
            
            <div class="map-sidebar">
              <h4>热门美食区域</h4>
              <div class="districts-list">
                <div class="district-item">
                  <h5>老城区</h5>
                  <p>传统美食聚集地，有多家百年老店</p>
                  <div class="food-types">
                    <span class="food-type-tag">小吃</span>
                    <span class="food-type-tag">面食</span>
                    <span class="food-type-tag">甜点</span>
                  </div>
                </div>
                
                <div class="district-item">
                  <h5>新区</h5>
                  <p>现代餐饮集中地，多国料理汇聚</p>
                  <div class="food-types">
                    <span class="food-type-tag">西餐</span>
                    <span class="food-type-tag">日料</span>
                    <span class="food-type-tag">创意菜</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="food-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h4>关于我们</h4>
            <p>探索全球美食文化，为您提供最全面的美食指南和推荐。</p>
            <div class="social-links">
              <a href="#" @click.prevent="shareTo('weixin')"><i class="fab fa-weixin"></i></a>
              <a href="#" @click.prevent="shareTo('weibo')"><i class="fab fa-weibo"></i></a>
              <a href="#" @click.prevent="shareTo('instagram')"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          
          <div class="footer-section">
            <h4>快速链接</h4>
            <ul>
              <li><a href="#">热门餐厅</a></li>
              <li><a href="#">美食攻略</a></li>
              <li><a href="#">厨艺教程</a></li>
              <li><a href="#">美食节活动</a></li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h4>联系我们</h4>
            <ul>
              <li><i class="fas fa-envelope me-2"></i>contact@foodexplorer.com</li>
              <li><i class="fas fa-phone me-2"></i>+86 123 4567 8910</li>
            </ul>
          </div>
        </div>
        
        <div class="footer-bottom">
          <p>&copy; 2024 美食探索. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'FoodExplorer',
  directives: {
    // 滚动动画指令
    'scroll-animate': {
      inserted(el) {
        const observer = new IntersectionObserver(entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              el.classList.add('visible')
              observer.unobserve(el)
            }
          })
        })
        observer.observe(el)
      }
    }
  },
  data() {
    return {
      searchQuery: '',
      showSuggestions: false,
      searchSuggestions: [],
      activeCategory: 'all',
      showFilterPanel: false,
      parallaxY: 0,
      mapLoaded: false,
      loadingMore: false,
      popularTags: ['火锅', '日料', '烧烤', '甜点', '海鲜', '素食'],
      categories: [
        { id: 'all', name: '全部', icon: 'fas fa-utensils', count: 128 },
        { id: 'chinese', name: '中餐', icon: 'fas fa-dragon', count: 45 },
        { id: 'japanese', name: '日料', icon: 'fas fa-fish', count: 32 },
        { id: 'western', name: '西餐', icon: 'fas fa-cheese', count: 28 },
        { id: 'dessert', name: '甜点', icon: 'fas fa-ice-cream', count: 15 },
        { id: 'street', name: '小吃', icon: 'fas fa-truck', count: 38 }
      ],
      filters: {
        priceRange: 500,
        minRating: 4,
        distance: 'any'
      },
      featuredFoods: [
        {
          id: 1,
          name: '北京烤鸭',
          cuisine: '北京菜',
          price: '￥150-300',
          rating: 4.8,
          image: 'https://picsum.photos/seed/duck/500/300',
          description: '传统北京名菜，皮脆肉嫩，搭配薄饼和甜面酱食用',
          isWishlisted: false,
          isNew: false,
          discount: null,
          category: 'chinese'
        },
        {
          id: 2,
          name: '寿司拼盘',
          cuisine: '日料',
          price: '￥80-200',
          rating: 4.6,
          image: 'https://picsum.photos/seed/sushi/500/300',
          description: '新鲜生鱼片与醋饭的完美结合，多种口味选择',
          isWishlisted: true,
          isNew: false,
          discount: 8,
          category: 'japanese'
        },
        {
          id: 3,
          name: '法式牛排',
          cuisine: '西餐',
          price: '￥180-400',
          rating: 4.9,
          image: 'https://picsum.photos/seed/steak/500/300',
          description: '精选牛里脊，配以黑胡椒酱汁，口感鲜嫩多汁',
          isWishlisted: false,
          isNew: true,
          discount: null,
          category: 'western'
        },
        {
          id: 4,
          name: '提拉米苏',
          cuisine: '甜点',
          price: '￥30-60',
          rating: 4.7,
          image: 'https://picsum.photos/seed/tiramisu/500/300',
          description: '经典意大利甜点，咖啡酒浸泡的手指饼干与马斯卡彭奶酪的融合',
          isWishlisted: false,
          isNew: false,
          discount: null,
          category: 'dessert'
        },
        {
          id: 5,
          name: '重庆火锅',
          cuisine: '川菜',
          price: '￥120-350',
          rating: 4.5,
          image: 'https://picsum.photos/seed/hotpot/500/300',
          description: '麻辣鲜香，多种食材搭配，适合秋冬食用',
          isWishlisted: true,
          isNew: false,
          discount: 9,
          category: 'chinese'
        },
        {
          id: 6,
          name: '章鱼小丸子',
          cuisine: '小吃',
          price: '￥10-20',
          rating: 4.3,
          image: 'https://picsum.photos/seed/ball/500/300',
          description: '外酥里嫩，章鱼粒Q弹，配以特制酱料',
          isWishlisted: false,
          isNew: true,
          discount: null,
          category: 'street'
        }
      ]
    }
  },
  computed: {
    // 筛选后的美食列表
    filteredFoods() {
      return this.featuredFoods.filter(food => {
        // 分类筛选
        if (this.activeCategory !== 'all' && food.category !== this.activeCategory) {
          return false
        }
        
        // 价格筛选（提取价格范围最大值进行比较）
        const maxPrice = parseInt(food.price.match(/\d+/g).pop())
        if (maxPrice > this.filters.priceRange) {
          return false
        }
        
        // 评分筛选
        if (food.rating < this.filters.minRating) {
          return false
        }
        
        // 搜索关键词筛选
        if (this.searchQuery && !food.name.includes(this.searchQuery) && 
            !food.cuisine.includes(this.searchQuery) && 
            !food.description.includes(this.searchQuery)) {
          return false
        }
        
        return true
      })
    }
  },
  methods: {
    // 视差滚动处理
    handleParallax(e) {
      this.parallaxY = e.target.scrollTop * 0.4
    },
    
    // 搜索输入处理
    handleSearchInput() {
      if (this.searchQuery.length > 1) {
        // 模拟API请求延迟
        setTimeout(() => {
          this.searchSuggestions = this.featuredFoods
            .filter(food => food.name.includes(this.searchQuery) || 
                           food.cuisine.includes(this.searchQuery))
            .map(food => ({ id: food.id, name: food.name }))
        }, 300)
      } else {
        this.searchSuggestions = []
      }
    },
    
    // 选择搜索建议
    selectSuggestion(suggestion) {
      this.searchQuery = suggestion.name
      this.showSuggestions = false
    },
    
    // 切换收藏状态
    toggleWishlist(foodId) {
      const food = this.featuredFoods.find(f => f.id === foodId)
      if (food) {
        food.isWishlisted = !food.isWishlisted
        // 显示提示
        this.$toast(food.isWishlisted ? '已添加到收藏' : '已取消收藏', {
          type: 'success',
          timeout: 2000
        })
      }
    },
    
    // 查看详情
    viewDetail(foodId) {
      this.$router.push(`/food/${foodId}`)
    },
    
    // 分享美食
    shareFood(food) {
      this.$toast(`分享 ${food.name} 成功`, {
        type: 'info'
      })
    },
    
    // 加载地图
    loadMap() {
      this.mapLoaded = false
      // 模拟地图加载延迟
      setTimeout(() => {
        this.mapLoaded = true
        this.$toast('地图加载完成', { type: 'success' })
      }, 1500)
    },
    
    // 隐藏搜索建议
    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false
      }, 200)
    },
    
    // 应用筛选
    applyFilters() {
      this.showFilterPanel = false
      this.$toast('筛选条件已应用', { type: 'success' })
    },
    
    // 重置筛选
    resetFilters() {
      this.filters = {
        priceRange: 500,
        minRating: 4,
        distance: 'any'
      }
    },
    
    // 加载更多
    loadMoreFoods() {
      this.loadingMore = true
      // 模拟加载更多数据
      setTimeout(() => {
        // 复制现有数据并修改ID和图片，模拟新数据
        const newFoods = this.featuredFoods.slice(0, 3).map(food => ({
          ...food,
          id: food.id + 100,
          image: `https://picsum.photos/seed/food${food.id + 10}/500/300`
        }))
        this.featuredFoods = [...this.featuredFoods, ...newFoods]
        this.loadingMore = false
        this.$toast('已加载更多美食', { type: 'success' })
      }, 1500)
    },
    
    // 分享到社交平台
    shareTo(platform) {
      switch(platform) {
        case 'weixin':
          this.$toast('微信分享功能已触发', { type: 'info' })
          break
        case 'weibo':
          this.$toast('微博分享功能已触发', { type: 'info' })
          break
        case 'instagram':
          this.$toast('Instagram分享功能已触发', { type: 'info' })
          break
      }
    }
  }
}
</script>

<style scoped>
.food-explorer {
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* 英雄区域样式（视差效果） */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.1s ease-out;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.floating-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
  animation-delay: var(--delay);
}

.floating-icon:nth-child(1) { top: 20%; left: 10%; }
.floating-icon:nth-child(2) { top: 60%; right: 15%; }
.floating-icon:nth-child(3) { bottom: 30%; left: 20%; }

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.min-vh-80 {
  min-height: 80vh;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.title-gradient {
  background: linear-gradient(45deg, #fff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-emoji {
  font-size: 3rem;
  margin-left: 1rem;
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

/* 智能搜索（玻璃态设计） */
.smart-search-container {
  max-width: 600px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 10px;
  margin-bottom: 1rem;
}

.search-icon {
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.7);
}

.smart-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 1.1rem;
  outline: none;
}

.smart-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-btn {
  background: #ff6b6b;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: #ff5252;
  transform: scale(1.05);
}

.suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  color: #333;
  transition: background 0.3s ease;
}

.suggestion-item:hover {
  background: #f8f9fa;
  border-radius: 8px;
}

/* 热门标签（横向滚动） */
.popular-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.tags-label {
  opacity: 0.8;
  white-space: nowrap;
}

.tags-scroll-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: thin;
}

.tags-scroll-container::-webkit-scrollbar {
  height: 4px;
}

.tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tag:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 英雄视觉区域 */
.hero-visual {
  position: relative;
  height: 400px;
}

.floating-card {
  position: absolute;
  width: 200px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: float-card 8s ease-in-out infinite;
}

.floating-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-1 {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.card-2 {
  top: 50px;
  right: 0;
  animation-delay: 2s;
}

.card-3 {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 4s;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* 新品/折扣标签 */
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff6b6b;
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  z-index: 1;
}

.card-badge.discount {
  background: #4ade80;
}

/* 智能导航 */
.smart-nav-section {
  background: white;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.smart-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.nav-categories {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: thin;
}

.nav-categories::-webkit-scrollbar {
  height: 4px;
}

.nav-category-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
}

.nav-category-btn.active {
  background: #667eea;
  color: white;
}

.nav-category-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
}

.nav-category-btn:hover:not(.active) {
  background: #f8f9fa;
}

.item-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
}

/* 高级筛选抽屉 */
.advanced-filters {
  position: relative;
}

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-toggle:hover {
  border-color: #667eea;
  color: #667eea;
}

/* 抽屉式筛选面板 */
.filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100vh;
  background: white;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1050;
}

.filter-drawer.open {
  transform: translateX(0);
}

.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow-y: auto;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.filter-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.filter-group h6 {
  margin-bottom: 1rem;
  font-weight: 600;
  color: #333;
}

.star-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.star-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #ccc;
  cursor: pointer;
}

.star-btn.active {
  color: #ffc107;
}

.range-value {
  margin-top: 0.5rem;
  text-align: right;
  font-weight: 600;
}

.filter-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1040;
}

.filter-drawer.open .drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* 美食卡片网格 */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  margin: 3rem 0 4rem;
}

.food-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
}

.food-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.food-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.food-card:hover .card-image img {
  transform: scale(1.1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
}

.wishlist-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wishlist-btn:hover {
  background: white;
  transform: scale(1.1);
}

.wishlist-btn .fa-heart {
  color: #ccc;
  transition: color 0.3s ease;
}

.wishlist-btn .fa-heart.active {
  color: #ff6b6b;
  animation: pulse 0.6s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.rating-badge {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.rating-badge .fa-star {
  color: #ffc107;
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.description {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cuisine {
  background: #667eea;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.9rem;
}

.price {
  font-weight: 600;
  color: #ff6b6b;
  font-size: 1.1rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-primary {
  flex: 1;
  background: #667eea;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-primary:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  border: 2px solid #e9ecef;
  color: #666;
  padding: 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}

.btn-secondary:hover {
  border-color: #667eea;
  color: #667eea;
}

/* 加载更多按钮 */
.load-more-container {
  margin: 4rem 0;
}

/* 美食地图 */
.food-map {
  margin: 6rem 0;
}

.map-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.map-placeholder {
  height: 400px;
  background: linear-gradient(45deg, #f8f9fa 25%, #e9ecef 25%, #e9ecef 50%, #f8f9fa 50%, #f8f9fa 75%, #e9ecef 75%);
  background-size: 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  position: relative;
}

.map-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-placeholder .fa-map-marked-alt {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.map-sidebar {
  padding: 2rem;
}

.map-sidebar h4 {
  margin-bottom: 1.5rem;
  color: #333;
}

.districts-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.district-item {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.district-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.district-item h5 {
  margin-bottom: 0.5rem;
  color: #333;
}

.district-item p {
  color: #666;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.food-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.food-type-tag {
  background: #667eea;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
}

/* 底部 */
.food-footer {
  background: #333;
  color: white;
  padding: 3rem 0 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h4,
.footer-section h5 {
  margin-bottom: 1rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section ul li a:hover {
  color: white;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: #667eea;
  transform: translateY(-2px);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .smart-nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  .map-container {
    grid-template-columns: 1fr;
  }
  
  .filter-drawer {
    width: 100%;
  }
  
  .floating-card {
    width: 150px;
  }
  
  .floating-card img {
    height: 100px;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .food-grid {
    grid-template-columns: 1fr;
  }
  
  .nav-category-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}
</style>